<template>
<div>
  <div class="content-box">
    <!--tab=======课程详情-->
    <div class="tab-con tab-course-box active">
      <!--课程头部信息-->
      <div id="model-course-top">
        <section class="section course-top-box">
          <h2>{{$route.params.uid}}</h2>
          <em class="tips">168人购买</em>
          <p class="price"><span>￥</span>99 </p>
        </section>
        <a class="to-page-share" href="share.html">
          <div class="icon-badge">
            <span class="bg-icon_share"></span>
          </div>
          <span>生成邀请卡</span>
        </a>
      </div>
      <!--产品保障-->
      <section class="section ensure" data-ydui-actionsheet="{target:'#ensure-info',closeElement:'#ensure-cancel'}">
        <ul class="ensure-lists">
          <li>
            <div class="icon-badge">
              <span class="bg-icon_bao"></span>
            </div>
            <p>支付保障</p>
          </li>
          <li>
            <div class="icon-badge">
              <span class="bg-icon_tui"></span>
            </div>
            <p>课前随时退</p>
          </li>
          <li>
            <div class="icon-badge">
              <span class="bg-icon_anytime"></span>
            </div>
            <p>随到随学</p>
          </li>
        </ul>
        <i class="icon-right"></i>
      </section>

      <div id="model-course-middle">
        <!--授课老师-->
        <div class="section">
          <div class="intro-tit">授课老师</div>
          <div class="intro-box intro-teacher">
            <div class="teacher-info-top">
              <div class="avatar" :style="{backgroundImage:'url('+avatarImg+')'}"></div>
              <div class="teachers-top-info">
                <h3>蔡琴</h3>
                <em class="tips">从业经验：10年</em>
                <em class="tips">学生人数：451人</em>
              </div>
            </div>
            <div class="teachers-infos">
              <p>前《故事大王》编辑总监</p>
              <p>多年写作教育经验，现任小学写作协会</p>
            </div>
          </div>
        </div>
        <!--课程介绍-->
        <div class="section">
          <div class="intro-tit">课程介绍</div>
          <div class="course-intro">
            <img src="images/content.png" alt="xx课程">
          </div>
        </div>

        <!--立即试听-->
        <div class="to-buy">
          <button type="button" class="buy-btn">立即试听：¥99</button>
        </div>
      </div>
      <!--产品保障详细上拉菜单-->
      <div class="m-actionsheet" id="ensure-info">
        <p class="tCenter">教学保障</p>
        <ul class="ensure-info-lists">
          <li class="actionsheet-item">
            <div class="icon-badge">
              <span class="bg-icon_bao"></span>
            </div>
            <div class="ensure-info-txt">
              <p>支付保障</p>
              <em class="tips">测试文字很多行测试文字很多行测试文字很多行测试文字很多行测试文字很多行测试文字很多行测试文字很多行测试文字很多行测试文字很多行测试文字很多行测试文字很多行测试文字很多行测试文字很多行测试文字很多行测试文字很多行</em>
            </div>
          </li>
          <li class="actionsheet-item">
            <div class="icon-badge">
              <span class="bg-icon_tui"></span>
            </div>
            <div class="ensure-info-txt">
              <p>课前随时退</p>
              <em class="tips">测试文字很少</em>
            </div>
          </li>
          <li class="actionsheet-item">
            <div class="icon-badge">
              <span class="bg-icon_anytime"></span>
            </div>
            <div class="ensure-info-txt">
              <p>随到随学</p>
              <em class="tips">测试文字很少dsfsd公司感受感受</em>
            </div>
          </li>
        </ul>
        <a href="javascript:;" class="actionsheet-action" id="ensure-cancel">确定</a>
      </div>
    </div>

    <!--tab=======课程目录-->
    <div class="section tab-con tab-menu-box">
      <p class="tCenter tips">授课方式：线下试听</p>
      <ol class="course-menu-lists">
        <li data-courseid="001"><p>社会主义核心价值观论</p><i class="icon-right"></i></li>
        <li data-courseid="002"><p>三年高考五年模拟</p><i class="icon-right"></i></li>
        <li data-courseid="003"><p>随便五个字</p><i class="icon-right"></i></li>
        <li data-courseid="004"><p>很多很多字的课程名字放在这里会怎样呢不知道呢看看吧</p><i class="icon-right"></i></li>
        <li data-courseid="005"><p>社会主义核心价值观论</p><i class="icon-right"></i></li>
        <li data-courseid="006"><p>三年高考五年模拟</p><i class="icon-right"></i></li>
      </ol>
      <p class="tCenter more-course">点击加载更多{{$store.state.tabindex}}</p>
    </div>

  </div>
</div>
</template>

<script>
  import store from '@/store/index.js'
    export default {
        name: "detail",
      data:function () {
        return {
          avatarImg:require('@/assets/images/avatar.jpg'),
          avatar:'#000'
        }
      }
    }
</script>

<style scoped>
  .course-top-box h2{color: #333333;font-size: .32rem;font-weight: normal}
  .course-top-box .tips{display: inline-block;margin: .12rem 0;}
  .course-top-box .price{color: #ff4549;font-size: .36rem}
  .to-page-share{background-color: #dff1e7;padding: .22rem .2rem;display: flex;display: -webkit-flex;align-items: center;color:#32b16c;font-size: .28rem}
   .bg-icon_share {
     width:.3rem; height: .3rem;
     background-image: url('../../assets/images/icon-share.png');}
   .bg-icon_tui {width: .22rem; height:.22rem;background-image: url("../../assets/images/icon-tui.png")}
   .bg-icon_anytime {width: .22rem; height:.22rem;background-image: url("../../assets/images/icon-anytime.png")}
   .bg-icon_bao {width: .22rem; height:.22rem;background-image: url("../../assets/images/icon-bao.png")}
  .ensure{display: flex;display: -webkit-flex;align-items: center;justify-content: space-between}
  .ensure-lists{display: flex;display: -webkit-flex;}
  .ensure-lists li{display: flex;display: -webkit-flex;align-items: center;margin-right: .25rem;flex-grow: 1}
  #ensure-info{text-align: left;background-color: #fff}
  #ensure-info p.tCenter{padding: .23rem 0;background-color: #f5f5f5;font-size: .28rem;color: #999999}
  .ensure-info-lists{padding: 0 .2rem}
  .ensure-info-lists .actionsheet-item{line-height: normal;display: flex;display: -webkit-flex;align-items: flex-start;padding: .2rem 0;height: auto}
  .ensure-info-lists .actionsheet-item .icon-badge{flex-shrink: 0;}
  .ensure-info-txt{flex-grow: 1}
  #ensure-cancel{background-color: #5bc189;font-size: .34rem;padding: .25rem 0;text-align: center;color:#fff;height: auto;line-height: normal;margin-top: .35rem}
  .intro-tit{color: #333333;font-size: .28rem;border-bottom: 1px solid #e6e6e6;padding: .2rem;position: relative;text-indent: .12rem}
  .intro-tit:before{position: absolute;content: '';width: .04rem;height: 50%;background-color: #32b16c;top:50%;transform: translateY(-50%);left: .2rem}
  .intro-teacher{padding:.2rem;}
  .teacher-info-top{display: flex;display: -webkit-flex;align-items: center;}
  .teacher-info-top .avatar{width: 1.65rem;height: 1.65rem;border-radius: 50%;background-repeat: no-repeat;background-size: cover;flex-shrink: 0;margin-right: .25rem}
  .teachers-top-info h3{font-size: .3rem;color: #333333;font-weight: normal;margin-bottom: .25rem}
  .teachers-top-info em:not(:first-of-type):before{content:'|';display: inline-block;margin: 0 .12rem}
  .teachers-infos{color: #333333;font-size: .24rem;line-height: .4rem;padding: .25rem 0;}
  .teachers-infos p{/*text-indent: 2em;*/margin: .12rem 0}
  .course-intro{padding-bottom: 1rem;}
  .course-intro img{max-width: 100%;text-align: center}
  .to-buy{background-color: #fff;position: fixed;bottom: 0;width: 100%;max-width: 750px;height: 1.11rem;padding: .15rem .35rem 0;box-shadow: -2px 0 5px 0px rgba(134, 134, 134, 0.3);}
  .buy-btn{width: 100%;height:.78rem;line-height: .78rem;background-color: #32b16c;color:#fff;font-size: .32rem;border:none;border-radius: .12rem;}
  .tab-con{display:none;}
  .tab-con.active{display:block;}
</style>
